<template>
	<view>
		<!--加群-->
		<uni-popup ref="lrPopup" type="center">
			<view class="lr-module" style="text-align: center;">
        <view style="color: white;font-size: 16px;font-weight: bold; margin: 0 auto; height: 50px;">{{ticket.exhibitionName?ticket.exhibitionName:''}}</view>
				<!--开展开始之前-->
        <view v-if="isBefore" class="c" style="min-height: 270px;">
					<view class="yuan lefty"></view>
					<view class="yuan righty"></view>
					<view class="title">
						<text></text>
					</view>
          <view style="color: #0b83a0;font-size: 20px;font-weight: 600;margin-top: 4rem;">
            <img style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon223.png"/>
            您已报名成功
          </view>
          <view style="margin-bottom:15rpx;font-size: 10px;margin-top: 15rpx;">注：开展期间将自动生成二维码</view>
				</view>
        <!--开展开始之后-->
        <view v-else class="c" style="min-height: 270px;">
          <view class="yuan lefty"></view>
          <view class="yuan righty"></view>
          <view class="title" style="border-bottom: 2rpx dashed #006880;">
            <text>{{ticket.spectatorType}}·电子门票</text>
          </view>
          <image v-if="ticket.ticketCode" style="width: 50%" :src="'https://m.nocexpo.com/h5/nocpreticket/getQrcode/'+ticket.ticketCode"/>
          <view style="margin-top:20rpx;color:#0686a3;font-size: 14px;font-weight: 600">{{ticket.company}}</view>
          <view style="margin-bottom:15rpx;color:#0686a3;font-size: 14px;font-weight: 600">{{ticket.nickName}}</view>
        </view>

        <view style="margin-top:30rpx;height: 100rpx;background-color: #0686a3;display: flex;justify-content: center;padding: 0 10px;">
          <view style="color: white;font-size: 12px;">感谢您参观{{ticket.exhibitionName?ticket.exhibitionName:''}},凭身份证或此二维码至展会现场入口处扫码入场!</view>
        </view>
      </view>
			<view class="contact-close" @click="$refs.lrPopup.close()"><image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/layerCloseBtn.png" mode="widthFix" /></view>
		</uni-popup>
  </view>
</template>

<script>
import login from '@/api/login.js';
import commonApi from '@/utils/commonMethod.js';
import detailApi from '@/api/exhibitiondetail.js';
export default {
	data() {
		return {
			isBack: false,
			currentUser:{},
			groupImgUrl:'',
      ticket: {},
      isBefore:'',
		};
	},
	props: {
		/**
		 * 显示的悬浮按钮（mp公众号,group交流群）,逗号分隔
		 *
		 */
		types: {
			type: String,
			default: ''
		},
    templateId: {
      type: String,
      default: ''
    }
	},
	computed: {
		scrollTopFn() {
			return this.$store.state.scrollTop;
		}
	},
	watch: {
		/**
		 * 监听scroll-view 滚动高度
		 * @param {Object} value
		 */
		scrollTopFn(value) {
			if (value > 300) {
				this.isBack = true;
			} else {
				this.isBack = false;
			}
		}
	},

	methods: {
		openPopup() {
		  this.$refs.lrPopup.open();
		  this.getTicket();
		},
		getTicket() {
		  console.log(this.templateId)
		  detailApi.hasSignUp(this.templateId).then(res => {
			let tickets = res.data.list
			if(tickets.length>0){
			  //弹出门票
			  console.log("弹出门票")
			  commonApi.getMemberTicket(tickets[0].id).then(response =>{
				if (Number(response.data.ticket.spectatorType)) {
				  response.data.ticket.spectatorType = '预登记观众'
				} else {
				  response.data.ticket.spectatorType = '专业观众'
				}

				this.ticket =  response.data.ticket
				console.log(this.ticket);
				this.isBefore = (this.ticket.validStartTimeStamp > new Date().getTime());
				console.log(this.ticket.validStartTime);
				console.log(new Date());
				console.log(new Date().getTime());
				console.log("isBefore");
				console.log(this.isBefore);

			  })
			}else{
			  //跳转到预登记报名
			  console.log("预登记保报名")
			  console.log(this.pregFormUrl);
			  uni.navigateTo({
				url: '/components/webview/webview?url=' + encodeURIComponent(this.pregFormUrl)
			  })
			}
		  })
		}
	}
};
</script>

<style lang="scss" scoped>
.publish-module {
	position: absolute;
	right: 2 * $interval;
	bottom: 60rpx;
	z-index: 3;
	.item {
		width: 232rpx;
		height: 96rpx;
		background: linear-gradient(95deg, #f63737 0%, #ff7c45 100%);
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;
		color: #fff;
		.img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 16rpx;
		}
	}
	.close {
		padding: $interval 0px;
		text-align: right;
		.img {
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.mp-module {
	width: 560rpx;
	position: relative;
	.img {
		width: 100%;
		display: block;
	}
	.c {
		position: absolute;
		width: 100%;
		padding-top: 65rpx;
		z-index: 3;
		left: 0px;
		top: 0px;
		.close {
			position: absolute;
			right: 5rpx;
			top: 10rpx;
		}
		.logo {
			width: 130rpx;
			display: block;
			margin: auto;
		}
		.b {
			color: #24918b;
			margin-top: 35rpx;
			text-align: center;
			font-size: $font-size-max + 10;
			font-weight: bold;
		}
		.t {
			text-align: center;
			color: #24918b;
			margin-top: 18rpx;
			font-weight: 600;
		}
		.qr {
			display: block;
			margin: 60rpx auto 65rpx;
			width: 330rpx;
		}
		.hint-text {
			color: #24918b;
			text-align: center;
		}
	}
}
.lr-module {
	width: 600rpx;
	background: #0484a1;
	border-radius: 36rpx;
	padding-top: 70rpx;
	padding-bottom: 30rpx;
	.c {
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
		width: 490rpx;
		margin: auto;
		text-align: center;
		.yuan {
			width: 30rpx;
			height: 30rpx;
			background: #0484a1;

			border-radius: 15rpx;
			position: absolute;
			top: 100rpx;
			z-index: 3;
		}
		.lefty {
			left: -15rpx;
		}
		.righty {
			right: -15rpx;
		}
		.title {
			padding: 45rpx 0px 30rpx;
			margin: 0px 60rpx;
			color: #006880;
		}
		.img {
			width: 420rpx;
			display: block;
			margin: 40rpx auto 0px;
		}
	}
}
.contact-close {
	padding: 48rpx;
	text-align: center;
	.img {
		width: 60rpx;
	}
}
.login-hint {
	position: fixed;
	left: 0px;
	width: 92%;
	height: 80rpx;
	bottom: 10rpx;
	padding: 0px 3% 0px 5%;
	border-radius: 40rpx;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: $font-size-min;
	.url {
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		width: 120rpx;
		background: $color-primary;
	}
}
.operate {
	position: fixed;
	width: 84rpx;
	right: $interval;
	bottom: 10%;
	z-index: 36;
	.add {
		width: 84rpx;
		height: 79rpx;
		background: linear-gradient(50deg, #f63737 0%, #ff7c45 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(247, 69, 58, 0.42);
		color: #fff;
		border-radius: 50%;
		margin-top: $interval;
		text-align: center;
		padding-top: 5rpx;

		.name {
			font-size: $font-size-min;
			margin-top: -10rpx;
		}
	}
	.image {
		height: 84rpx;
		border-radius: 50%;
		background-color: $bg-color;
		margin-top: $interval;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.ggh {
		margin-top: $interval;
		text-align: center;
		line-height: 84rpx;
		font-size: $font-size-min;
		color: #fff;
		border-radius: 50%;
		background-color: $color-primary;
	}
}
</style>
